<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('修改人员')" />
	<th:block th:include="include :: cropbox-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-person-edit" th:object="${person}">
<!--            <input id="personId" name="personId" th:field="*{personId}"  type="hidden">-->
			<div class="form-group">
				<label class="col-sm-2 control-label"><span style="color: red; ">*</span>人员ID：</label>
				<div class="col-sm-4">
					<input id="personId" name="personId" th:field="*{personId}" class="form-control" type="text" readonly="true">
				</div>
				<label class="col-sm-2 control-label"><span style="color: red; ">*</span>姓名：</label>
				<div class="col-sm-4">
					<input id="personName" name="personName" th:field="*{personName}" class="form-control" type="text" required>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label"><span style="color: red; ">*</span>性别：</label>
				<div class="col-sm-4">
					<div class="input-group" style="width: 100%">
						<select name="sex" class="form-control m-b" th:with="type=${@dict.getType('sys_user_sex')}">
							<option value="">请选择..</option>
							<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{sex}"></option>
						</select>
					</div>
<!--					<input id="sex" name="sex" th:field="*{sex}" class="form-control" type="text">-->
				</div>
				<label class="col-sm-2 control-label">所属组织：</label>
				<div class="col-sm-4">
					<div class="input-group">
						<input class="form-control" type="text" name="deptName" onclick="selectDeptTree()" id="treeName" th:field="*{deptName}" readonly>
						<span class="input-group-addon" onclick="selectDeptTree()"><i class="fa fa-search"></i></span>
					</div>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label"><span style="color: red; ">*</span>证件类型：</label>
				<div class="col-sm-4">
					<div class="input-group" style="width: 100%">
						<select name="certificateType" class="form-control m-b" th:with="type=${@dict.getType('sys_certificate_type')}">
							<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{certificateType}"></option>
						</select>
					</div>
					<!--					<input id="certificateType" name="certificateType" th:field="*{certificateType}" class="form-control" type="text">-->
				</div>
				<label class="col-sm-2 control-label"><span style="color: red; ">*</span>证件号码：</label>
				<div class="col-sm-4">
					<input id="certificateNumber" name="certificateNumber" th:field="*{certificateNumber}" class="form-control" type="text" required>
				</div>

			</div>
            <input id="deptId" name="deptId" th:field="*{deptId}" class="form-control" type="hidden">
			<div class="form-group">
				<label class="col-sm-2 control-label">家庭地址：</label>
				<div class="col-sm-10">
					<input id="address" name="address" th:field="*{address}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	

				<label class="col-sm-2 control-label">紧急联系人：</label>
				<div class="col-sm-4">
					<input id="linkmanName" name="linkmanName" th:field="*{linkmanName}" class="form-control" type="text">
				</div>
				<label class="col-sm-2 control-label">联系人电话：</label>
				<div class="col-sm-4">
					<input id="linkmanTel" name="linkmanTel" th:field="*{linkmanTel}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">本人电话：</label>
				<div class="col-sm-4">
					<input id="tel" name="tel" th:field="*{tel}" class="form-control" type="text">
				</div>
				<label class="col-sm-2 control-label">备注：</label>
				<div class="col-sm-4">
					<input id="remark" name="remark" th:field="*{remark}" class="form-control" type="text">
				</div>

			</div>
			<hr/>
			<div class="form-group">
				<label class="col-sm-2 control-label">标签ID：</label>
				<div class="col-sm-4">
					<input id="tagId" name="tagId" th:field="*{tagId}" class="form-control" type="text" >
				</div>
				<label class="col-sm-2 control-label">标签类型：</label>
				<div class="col-sm-4">
					<input id="modelType" name="modelType" class="form-control" type="text" readonly="true">
				</div>
			</div>
			<div class="form-group">

				<label class="col-sm-2 control-label">标签型号：</label>
				<div class="col-sm-4">
					<input id="modelNumber" name="modelNumber" class="form-control" type="text" readonly="true">
				</div>
			</div>
					<input id="avatar" name="avatar" th:field="*{avatar}" class="form-control" type="hidden">
		</form>
    </div>
	<div class="container">
		<div class="imageBox1">
			<div class="thumbBox"></div>
			<div class="spinner" style="display: none">Loading...</div>
		</div>
		<div class="action">
			<div class="new-contentarea tc">
				<a href="javascript:void(0)" class="upload-img"> <label for="avatar1">上传图像</label> </a>
				<input type="file" class="" name="avatar1" id="avatar1" accept="image/*"/>
			</div>
			<input type="button" id="btnCrop" class="Btnsty_peyton" value="裁切" />
			<input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+" />
			<input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" />
			<!--			<input id="imgPath" name="avatar" class="form-control" type="text" style="display: none">-->
		</div>
		<div class="cropped1"></div>
	</div>
	<th:block th:include="include :: footer" />
	<th:block th:include="include :: cropbox-js" />
    <script type="text/javascript">
		// 去掉所有input的autocomplete, 显示指定的除外 
		$(function(){
			$('input:not([autocomplete]),textarea:not([autocomplete]),select:not([autocomplete])').attr('autocomplete', 'off');
		});
		$(window).load(function () {
			// alert("1");
			var avatar = '[[${person.avatar}]]';
			var options = {
				thumbBox: '.thumbBox',
				spinner: '.spinner',
				imgSrc: $.common.isEmpty(avatar) ? ctx + 'img/avatar.jpg' : ctx + 'profile/avatar/' + avatar
			};
			cropper = $('.imageBox1').cropbox(options);
			$('#avatar1').on('change', function() {
				var reader = new FileReader();
				reader.onload = function(e) {
					options.imgSrc = e.target.result;
					//根据MIME判断上传的文件是不是图片类型
					if((options.imgSrc).indexOf("image/")==-1){
						$.modal.alertWarning("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
					} else {
						cropper = $('.imageBox1').cropbox(options);
					}
				}
				reader.readAsDataURL(this.files[0]);
			});

			$('#btnCrop').on('click', function(){
				var img = cropper.getDataURL();
				$('.cropped1').html('');
				$('.cropped1').append('<img src="'+img+'" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shadow:0px 0px 12px #7E7E7E;" ><p>64px*64px</p>');
				$('.cropped1').append('<img src="'+img+'" align="absmiddle" style="width:128px;margin-top:4px;border-radius:128px;box-shadow:0px 0px 12px #7E7E7E;"><p>128px*128px</p>');
				// $('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;"><p>180px*180px</p>');
			});

			$('#btnZoomIn').on('click', function(){
				cropper.zoomIn();
			});

			$('#btnZoomOut').on('click', function(){
				cropper.zoomOut();
			});
			showType();
		});
		var prefix = ctx + "system/person";
		var icon = "<i class='fa fa-times-circle'></i> ";
		$("#form-person-edit").validate({
			onfocusout: function(element) {
				$(tagId).valid();
				showType();
			},
			rules: {
				personId: {
					required: true,
				},
				personName: {
					required: true,
					minlength: 2,
					maxlength:4
				},
				sex: {
					required: true,
				},
				certificateType: {
					required: true,
				},
				certificateNumber: {
					required: true,
					isIdentity:true
				},
				deptId: {
					// required: true,
				},
				address: {
					// required: true,
				},
				tel: {
					isPhone:true,
				},
				linkmanName: {
					minlength: 2,
					maxlength:4
					// required: true,
				},
				linkmanTel: {
					isPhone:true
					// required: true,
				},
				remark: {
					// required: true,
				},
				tagId:{
					rangelength:[10,12],
					remote: {
						url: prefix + "/checkTagId",
						type: "post",
						dataType: "json",
						data: {
							name: function () {
								return $.common.trim($("#tagId").val());
							}
						},
						dataFilter: function (data, type) {
							return $.validate.unique(data);
						}
					}

				},
			},
			messages: {
				"personName": {
					required: icon + "请输入人员名称",
					minlength: icon + "必须2-4个字符"
				},
				"certificateNumber": {
					required: icon + "请输入证件号码",
					isIdentity: icon + "格式不正确"
				},
				"tagId":{
					rangelength:"请输入12位长度标签Id",
					remote:icon + "格式不正确"
				}
			}
		});


		// function submitHandler() {
	    //     if ($.validate.form()) {
	    //         $.operate.save(prefix + "/edit", $('#form-person-edit').serialize());
	    //     }
	    // }
		function submitHandler() {
			var img = null;
			try {
				img = cropper.getBlob();
			}catch (err) {
			}
			if (img==null){
				$('#avatar').val(null);
				if ($.validate.form()) {
					$.operate.save(prefix + "/edit", $('#form-person-edit').serialize());
				}
			}else{
				var formdata = new FormData();
				formdata.append("avatarfile", img);
				$.ajax({
					url: ctx + "system/person/updateAvatar",
					data: formdata,
					type: "post",
					processData: false,
					contentType: false,
					success: function(result) {
						var code = result.code;
						var msg = result.msg;
						if (code!=0){
							$.modal.alertError(msg);
						}else {
							$('#avatar').val(msg);
							if ($.validate.form()) {
								$.operate.save(prefix + "/edit", $('#form-person-edit').serialize());
							}
							// return msg;
						}
					},
					error : function(request) {
						$.modal.alertError("系统错误");
					},
				})
			}
		}
        /*用户管理-修改-选择部门树*/
        function selectDeptTree() {
            var deptId = $.common.isEmpty($("#treeId").val()) ? "100" : $("#treeId").val();
            var url = ctx + "system/dept/selectDeptTree/" + deptId;
            var options = {
                title: '选择组织',
                width: "380",
                url: url,
                callBack: doSubmit
            };
            $.modal.openOptions(options);
        }

        function doSubmit(index, layero){
            var tree = layero.find("iframe")[0].contentWindow.$._tree;
            if ($.tree.notAllowParents(tree)) {
                var body = layer.getChildFrame('body', index);
                $("#treeId").val(body.find('#treeId').val());
                $("#treeName").val(body.find('#treeName').val());
                $("#deptId").val(body.find('#treeId').val());
                layer.close(index);
            }
        }
		function showType(){
			var tagId = $('#tagId').val();
			if (tagId.length>9){
				var code = tagId.substring(8,10);
				$.ajax({
					url:"/system/deviceModel/getDeviceModelByCode?modelCode="+code,
					type: 'post',
					data: "",
					cache: false,
					dataType:"json",
					async:false,
					// contentType: false,
					// processData: false,
					success: function (result) {
						var data = result.data;
						if (data != null&&data!=""){
							$('#tagType').val(data.modelId);
							$('#modelNumber').val(data.modelNumber);
							$('#modelType').val(data.modelType);
						}else {
							$('#modelNumber').val("");
							$('#modelType').val("");
							$('#tagType').val("");
							// $.modal("标签Id格式输入不正确") ;
						}
					}
				});
			}else {
				$('#tagType').val("");
				$('#modelNumber').val("");
				$('#modelType').val("");
				// $.modal("标签Id格式输入不正确") ;
			}
		}
	</script>
</body>
</html>
